<template>
	<view class="container">
		<!-- 自定义导航栏 -->
		<view class="custom-navbar" :style="{ paddingTop: statusBarHeight + 'px' }">
			<view class="navbar-content">
				<view class="back-btn" @click="goBack">
					<text class="iconfont">&#xe679;</text>
				</view>
				<text class="navbar-title">{{serviceDetail.name}}</text>
				<view class="navbar-right" @click="openShare">
					<text class="iconfont share-icon">&#xe6f3;</text>
				</view>
			</view>
		</view>
		
		<!-- 服务横幅 -->
		<view class="service-banner" :style="{ background: serviceDetail.gradient }">
			<view class="banner-content">
				<text class="banner-title">{{serviceDetail.name}}</text>
				<text class="banner-price">¥{{serviceDetail.price}}</text>
			</view>
			<view class="banner-icon">
				<text class="iconfont">{{serviceDetail.iconCode}}</text>
			</view>
		</view>
		
		<!-- 服务信息卡片 -->
		<view class="detail-card">
			<!-- 服务描述 -->
			<view class="detail-section">
				<view class="section-title">
					<view class="title-decorator"></view>
					<text>服务描述</text>
				</view>
				<view class="section-content">
					<text class="desc-text">{{serviceDetail.desc}}</text>
				</view>
			</view>
			
			<!-- 功能特点 -->
			<view class="detail-section">
				<view class="section-title">
					<view class="title-decorator"></view>
					<text>功能特点</text>
				</view>
				<view class="section-content">
					<view class="feature-list">
						<view class="feature-item" v-for="(feature, index) in serviceDetail.features" :key="index">
							<text class="feature-icon iconfont">&#xe654;</text>
							<text class="feature-text">{{feature}}</text>
						</view>
					</view>
				</view>
			</view>
			
			<!-- 适用场景 -->
			<view class="detail-section">
				<view class="section-title">
					<view class="title-decorator"></view>
					<text>适用场景</text>
				</view>
				<view class="section-content">
					<view class="usage-list">
						<view class="usage-item" v-for="(usage, index) in serviceDetail.usages" :key="index">
							<view class="usage-index">
								<text>{{index + 1}}</text>
							</view>
							<text class="usage-text">{{usage}}</text>
						</view>
					</view>
				</view>
			</view>
			
			<!-- 效果展示 -->
			<view class="detail-section" v-if="serviceDetail.demoTypes && serviceDetail.demoTypes.length">
				<view class="section-title">
					<view class="title-decorator"></view>
					<text>效果展示</text>
				</view>
				<view class="section-content">
					<view class="demo-grid">
						<view class="demo-item" v-for="(demo, index) in serviceDetail.demoTypes" :key="index">
							<view class="demo-icon" :style="{ background: serviceDetail.gradient }">
								<text class="iconfont">{{demo.icon}}</text>
							</view>
							<text class="demo-name">{{demo.name}}</text>
						</view>
					</view>
				</view>
			</view>
			
			<!-- 客户评价 -->
			<view class="detail-section">
				<view class="section-title">
					<view class="title-decorator"></view>
					<text>客户评价</text>
				</view>
				<view class="section-content">
					<view class="review-list">
						<view class="review-item">
							<view class="review-header">
								<view class="review-avatar">
									<text class="iconfont">&#xe75c;</text>
								</view>
								<view class="review-info">
									<text class="review-username">张小姐</text>
									<view class="review-rating">
										<text class="iconfont rating-star">&#xe6a9;</text>
										<text class="iconfont rating-star">&#xe6a9;</text>
										<text class="iconfont rating-star">&#xe6a9;</text>
										<text class="iconfont rating-star">&#xe6a9;</text>
										<text class="iconfont rating-star">&#xe6a9;</text>
									</view>
								</view>
							</view>
							<text class="review-content">非常好用，大大提高了我们的工作效率，产品图片质量高，客户反馈也很好！</text>
						</view>
						<view class="review-item">
							<view class="review-header">
								<view class="review-avatar">
									<text class="iconfont">&#xe75c;</text>
								</view>
								<view class="review-info">
									<text class="review-username">李经理</text>
									<view class="review-rating">
										<text class="iconfont rating-star">&#xe6a9;</text>
										<text class="iconfont rating-star">&#xe6a9;</text>
										<text class="iconfont rating-star">&#xe6a9;</text>
										<text class="iconfont rating-star">&#xe6a9;</text>
										<text class="iconfont rating-star">&#xe6a9;</text>
									</view>
								</view>
							</view>
							<text class="review-content">图生标题功能很灵活，生成的标题非常吸引人，提升了点击率，产品质量有保证！</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 底部操作栏 -->
		<view class="action-bar">
			<view class="action-share" @click="openShare">
				<text class="iconfont action-icon">&#xe6f3;</text>
				<text class="action-text">分享</text>
			</view>
			<view class="contact-btn" @click="contactService">
				<text>咨询服务</text>
			</view>
			<view class="purchase-btn" @click="purchaseService">
				<text>立即购买</text>
			</view>
		</view>
		
		<!-- 分享弹出层 -->
		<uni-popup ref="sharePopup" type="bottom">
			<view class="share-popup">
				<view class="share-title">分享到</view>
				<view class="share-options">
					<view class="share-option" @click="shareToWeixin">
						<text class="share-icon iconfont">&#xe638;</text>
						<text class="share-name">微信</text>
					</view>
					<view class="share-option" @click="shareToFriend">
						<text class="share-icon iconfont">&#xe634;</text>
						<text class="share-name">朋友圈</text>
					</view>
					<view class="share-option" @click="shareToQQ">
						<text class="share-icon iconfont">&#xe62d;</text>
						<text class="share-name">QQ</text>
					</view>
					<view class="share-option" @click="copyLink">
						<text class="share-icon iconfont">&#xe632;</text>
						<text class="share-name">复制链接</text>
					</view>
				</view>
				<view class="share-cancel" @click="closeShare">
					<text>取消</text>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				serviceId: null,
				serviceDetail: {},
				serviceList: [
					{
						id: 1,
						name: '批量套图工具',
						desc: '手动框住内容，然后一键批量套图得到产品图。支持多种模板样式，可快速批量处理大量产品图片，提高电商图片制作效率。',
						price: '3000',
						icon: '/static/ecommerce/template.png',
						banner: '/static/ecommerce/template-banner.png',
						features: [
							'智能识别框选区域，精准提取产品',
							'支持多种电商平台模板样式',
							'一键批量处理，高效省时',
							'自定义模板编辑功能',
							'高清图片输出，保证产品展示质量'
						],
						usages: [
							'电商卖家批量制作商品主图',
							'营销活动海报快速生成',
							'产品目录批量制作',
							'新品上架图片批量处理'
						],
						demoImages: [
							'/static/ecommerce/template-demo1.png',
							'/static/ecommerce/template-demo2.png',
							'/static/ecommerce/template-demo3.png'
						]
					},
					{
						id: 2,
						name: '图生标题',
						desc: '批量导入产品图，对图进行智能分析理解，自动生成吸引力强的电商标题。支持多种风格，适合各类电商平台使用。',
						price: '2000',
						icon: '/static/ecommerce/title.png',
						banner: '/static/ecommerce/title-banner.png',
						features: [
							'智能图像识别分析产品特征',
							'多种标题风格可选（吸引型、描述型、促销型等）',
							'支持批量处理产品图',
							'支持标题长度和关键词调整',
							'适配多平台标题规范（淘宝、京东、拼多多等）'
						],
						usages: [
							'新店铺产品批量上架标题生成',
							'老店铺产品标题优化更新',
							'促销活动产品标题批量更新',
							'跨平台产品标题一键适配'
						],
						demoImages: [
							'/static/ecommerce/title-demo1.png',
							'/static/ecommerce/title-demo2.png',
							'/static/ecommerce/title-demo3.png'
						]
					},
					{
						id: 3,
						name: '图生图/文生图',
						desc: '批量对图片进行理解生成关联图，可大搭配提示词组合使用。支持多种风格转换，满足不同场景下的图片需求。',
						price: '3000',
						icon: '/static/ecommerce/image.png',
						banner: '/static/ecommerce/image-banner.png',
						features: [
							'智能图像内容理解与分析',
							'多种图像风格转换（写实、卡通、水彩等）',
							'支持文字描述生成相关图片',
							'高级提示词组合功能',
							'批量处理高效率输出'
						],
						usages: [
							'产品多角度展示图生成',
							'不同场景下的产品应用图',
							'产品细节特写图批量制作',
							'创意营销图片快速生成'
						],
						demoImages: [
							'/static/ecommerce/image-demo1.png',
							'/static/ecommerce/image-demo2.png',
							'/static/ecommerce/image-demo3.png'
						]
					},
					{
						id: 4,
						name: '图生视频',
						desc: '对图片内容理解生成对应产品特写视频+音乐定制。支持多种视频风格和时长，让静态产品图变成生动的宣传视频。',
						price: '5000',
						icon: '/static/ecommerce/video.png',
						banner: '/static/ecommerce/video-banner.png',
						features: [
							'智能分析产品图片特征',
							'生成多视角产品展示视频',
							'自动匹配适合产品风格的背景音乐',
							'支持多种视频时长和风格',
							'一键添加品牌Logo和联系方式'
						],
						usages: [
							'电商平台短视频制作',
							'朋友圈产品宣传视频',
							'直播间产品介绍视频',
							'新品发布视频快速生成'
						],
						demoImages: [
							'/static/ecommerce/video-demo1.png',
							'/static/ecommerce/video-demo2.png',
							'/static/ecommerce/video-demo3.png'
						]
					}
				]
			}
		},
		onLoad(options) {
			if (options.id) {
				this.serviceId = parseInt(options.id);
				this.getServiceDetail();
			}
		},
		methods: {
			getServiceDetail() {
				const service = this.serviceList.find(item => item.id === this.serviceId);
				if (service) {
					this.serviceDetail = service;
				} else {
					uni.showToast({
						title: '服务信息不存在',
						icon: 'none'
					});
					setTimeout(() => {
						this.goBack();
					}, 1500);
				}
			},
			goBack() {
				uni.navigateBack();
			},
			previewImage(current, urls) {
				uni.previewImage({
					current,
					urls
				});
			},
			contactService() {
				// 这里可以实现联系客服的逻辑，例如跳转到客服页面或拨打电话
				uni.showToast({
					title: '正在连接客服...',
					icon: 'none'
				});
				// 示例：拨打客服电话
				// uni.makePhoneCall({
				//     phoneNumber: '4006XXXXXX'
				// });
			},
			purchaseService() {
				// 这里可以实现购买服务的逻辑，例如跳转到支付页面
				uni.showToast({
					title: '即将跳转到支付页面',
					icon: 'none'
				});
				// 示例：跳转到支付页面
				// uni.navigateTo({
				//     url: `/ecommercePlugin/pages/payment/payment?id=${this.serviceId}&price=${this.serviceDetail.price}`
				// });
			}
		}
	}
</script>

<style lang="scss">
	.container {
		padding: 0;
		background-color: #f8f8f8;
		min-height: 100vh;
		position: relative;
		padding-bottom: 120rpx;
	}
	
	.header {
		display: flex;
		align-items: center;
		padding: 20rpx 30rpx;
		background-color: #fff;
		position: relative;
		box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.05);
		
		.back-btn {
			padding: 15rpx;
			margin-right: 20rpx;
			
			.icon-back {
				font-size: 36rpx;
				color: #333;
			}
		}
		
		.title {
			font-size: 36rpx;
			font-weight: bold;
			color: #333;
			flex: 1;
			text-align: center;
			margin-right: 66rpx;
		}
	}
	
	.detail-content {
		.service-banner {
			width: 100%;
			height: 400rpx;
			
			image {
				width: 100%;
				height: 100%;
			}
		}
		
		.service-info {
			padding: 30rpx;
			background-color: #fff;
			border-radius: 30rpx 30rpx 0 0;
			margin-top: -30rpx;
			position: relative;
			
			.service-header {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 30rpx;
				
				.service-name {
					font-size: 40rpx;
					font-weight: bold;
					color: #333;
				}
				
				.service-price {
					.price-label {
						font-size: 28rpx;
						color: #666;
					}
					
					.price {
						font-size: 40rpx;
						font-weight: bold;
						color: #ff6b6b;
					}
				}
			}
			
			.service-desc {
				margin-bottom: 40rpx;
				
				.desc-title {
					font-size: 32rpx;
					font-weight: bold;
					color: #333;
					margin-bottom: 20rpx;
					display: block;
				}
				
				.desc-content {
					font-size: 28rpx;
					color: #666;
					line-height: 1.6;
					display: block;
				}
			}
			
			.service-features {
				margin-bottom: 40rpx;
				
				.features-title {
					font-size: 32rpx;
					font-weight: bold;
					color: #333;
					margin-bottom: 20rpx;
					display: block;
				}
				
				.feature-list {
					.feature-item {
						display: flex;
						align-items: center;
						margin-bottom: 20rpx;
						
						.feature-icon {
							color: #4caf50;
							margin-right: 15rpx;
							font-size: 32rpx;
						}
						
						.feature-text {
							font-size: 28rpx;
							color: #555;
							line-height: 1.4;
						}
					}
				}
			}
			
			.service-usage {
				margin-bottom: 40rpx;
				
				.usage-title {
					font-size: 32rpx;
					font-weight: bold;
					color: #333;
					margin-bottom: 20rpx;
					display: block;
				}
				
				.usage-list {
					.usage-item {
						display: flex;
						align-items: flex-start;
						margin-bottom: 15rpx;
						
						.usage-number {
							width: 40rpx;
							height: 40rpx;
							background-color: #2196f3;
							color: #fff;
							border-radius: 50%;
							display: flex;
							align-items: center;
							justify-content: center;
							font-size: 24rpx;
							margin-right: 15rpx;
							flex-shrink: 0;
						}
						
						.usage-text {
							font-size: 28rpx;
							color: #555;
							line-height: 1.4;
							flex: 1;
						}
					}
				}
			}
			
			.demo-section {
				.demo-title {
					font-size: 32rpx;
					font-weight: bold;
					color: #333;
					margin-bottom: 20rpx;
					display: block;
				}
				
				.demo-scroll {
					width: 100%;
					white-space: nowrap;
					
					.demo-list {
						display: inline-flex;
						
						.demo-item {
							width: 280rpx;
							height: 280rpx;
							margin-right: 20rpx;
							border-radius: 15rpx;
							overflow: hidden;
							
							image {
								width: 100%;
								height: 100%;
							}
						}
					}
				}
			}
		}
	}
	
	.action-bar {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		display: flex;
		background-color: #fff;
		padding: 20rpx 30rpx;
		box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
		
		.contact-btn, .purchase-btn {
			flex: 1;
			height: 80rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 40rpx;
			font-size: 30rpx;
			font-weight: bold;
		}
		
		.contact-btn {
			background-color: #f2f2f2;
			color: #666;
			margin-right: 20rpx;
		}
		
		.purchase-btn {
			background-color: #ff6b6b;
			color: #fff;
		}
	}
</style>
